<template>
    <div class=''>
        <van-nav-bar title="商品详情" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" />
        <img :src="this.$route.query.item.product_picture" alt="">
        <h3>{{this.$route.query.item.product_name}}</h3>
        <p :style="{color:'red'}">￥{{this.$route.query.item.product_price}}元</p>
        <p>{{this.$route.query.item.product_intro}}</p>
        <p>
            <span :style="{marginRight:'10px'}"><van-icon name="shopping-cart" size="30" @click="add($route.query.item)" /></span>
            <span><van-icon name="star-o" size="30" @click="like($route.query.item)" /></span>
        </p>
    </div>
</template>

<script>
    export default {
        data() {
            return {};
        },
        mounted() {},
        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },
            add(item){
                this.$store.commit("add",item)
                this.$router.push({path:"/shopcar"})
            },
            like(item){
                this.$store.commit("like",item)
                this.$router.push({path:"/like"})
            }
        },
    };
</script>

<style lang='scss'>
img{
    width: 80%;
}
</style>